<template>
  <div v-show="dialogSend">
    <div class="mask" @click.self="closeDialog"></div>
    <div class="dialog">
      <div class="topic">
        {{ topicName }}
        <div class="svgs">
          <SvgIcon
            name="tick"
            size="20px"
            class="svg cursor-pointer"
            @click="handleComfirm"
          />
        </div>
      </div>
      <div class="flex items-center flex-col">
        <input
          placeholder="请输入话题"
          v-model="topicText"
          class="ipt mb-2"
          maxlength="3"
        />
        <p style="color: #73739f; font-size: 18px; opacity: 0.6">
          （最多输入三个字符）
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon.vue'

const emit = defineEmits(['sendMsg'])

const dialogSend = ref(false)
const topicName = '发布话题'
const topicText = ref('')
const sendStatus = ref<any>(null)

const showFn = (status: number) => {
  // 数据清空
  topicText.value = ''
  sendStatus.value = status

  dialogSend.value = true
}

// 关闭弹窗
const closeDialog = () => {
  dialogSend.value = false
}

// 确定
const handleComfirm = () => {
  if (topicText.value) {
    emit('sendMsg', topicText.value, sendStatus.value)
    dialogSend.value = false
  } else {
    ElMessage.error('请输入话题')
  }
}

defineExpose({
  showFn,
})
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 999;
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background-color: #fff;
  z-index: 1000;
  border-radius: 20px;
  padding: 24px;

  .topic {
    height: 48px;
    background-color: #b3b4fd;
    border-radius: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    fill: #fff;
  }
}

.ipt {
  width: 90%;
  height: 38px;
  margin-top: 12px;
  padding-left: 8px;
  background-color: #f0f0fe;
}

.svgs {
  position: absolute;
  right: 12%;
}

.svg:hover {
  fill: #9efef9 !important;
}
</style>
